<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
        <el-form-item label="标题">
            <el-input v-model="queryParams.title" style="width: 150px" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="queryParams.status" clearable  size="small">
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="通知发送状态">
            <el-select v-model="queryParams.isSend" clearable size="small">
                <el-option label="已发送" value="1"></el-option>
                <el-option label="未发送" value="0"></el-option>
            </el-select>
        </el-form-item>
        
        
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button  icon="el-icon-search" size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleEdit(null)"
          >新增安全通知内容</el-button>
        </el-col>
        <el-col :span="1.5">
        <el-button
            type="warning"
            icon="el-icon-circle-check"
            size="mini"
            @click="operationStatus(1)"
            :disabled="multiple"
            >启用</el-button>
        </el-col>
        <el-col :span="1.5">
            <el-button
            type="warning"
            icon="el-icon-circle-close"
            size="mini"
            @click="operationStatus(0)"
            :disabled="multiple"
            >停用</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="configList" row-key="id" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="标题" align="center" prop="title" :show-overflow-tooltip="true"/>
        <el-table-column label="发布范围" align="center" prop="releaseScopeNotice" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.releaseScopeNotice==1" >班级</el-tag>
                <el-tag v-if="scope.row.releaseScopeNotice==2" >年级</el-tag>
                <el-tag v-if="scope.row.releaseScopeNotice==3" >全校</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="是否通知学生" align="center" prop="isNoticeStudent" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isNoticeStudent==1" type="success">是</el-tag>
                <el-tag v-if="scope.row.isNoticeStudent==0" type="info">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="通知发送状态" align="center" prop="isNoticeStudent" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isSend==1" type="success">已发送</el-tag>
                <el-tag v-if="scope.row.isSend==0" type="info">未发送</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="150" prop="status" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status=='1'" >启用</el-tag>
                <el-tag v-if="scope.row.status=='0'" type="info">停用</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center" width="150" prop="createTime" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{parseTime(scope.row.createTime)}}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="220" fixed="right">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button size="mini" circle type="success" icon="el-icon-edit" @click="handleEdit(scope.row)" />
                  </el-tooltip>
                  
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button size="mini" circle type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" />
                  </el-tooltip>
                  
                  <el-tooltip class="item" effect="dark" content="预览" placement="top">
                    <el-button size="mini" circle  icon="el-icon-view" @click="viewContent(scope.row)" />
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" v-if="scope.row.status==1" content="发送通知" placement="top">
                    <el-button size="mini" circle  icon="el-icon-s-promotion" @click="handleSendNotice(scope.row)" />
                  </el-tooltip>
                  
                </template>
        </el-table-column>
        
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!--预览-->
      <el-dialog title="预览" :visible.sync="open" width="40%"  >
            <el-divider content-position="center">
                <el-select size="mini" v-model="selectModelData" placeholder="选择机型" @change="selectModel">
                    <el-option label="IPhoneSE" value="375,667" ></el-option>
                    <el-option label="IPhoneXR" value="414,896"></el-option>
                    <el-option label="IPhone12 PRO" value="390,844"></el-option>
                    <el-option label="Pixel 5" value="393,851"></el-option>
                    <el-option label="Galaxy Fold" value="280,653"></el-option>
                </el-select>
            </el-divider>
            <div>
                <div class="modelDiv" :style="modelStyle">
                    <div  style="text-align: center;"><h2>{{viewData.title}}</h2></div>
                    <div v-html="viewData.noticeContent"></div>
                </div>
            </div>
            
        </el-dialog>
      
    </div>
  </template>
  
  <script>
  import { listTermtime } from "@/api/system/termtime.js";
  import { findNoticeSchoolPageList, getNoticeSchool,deleteNoticeSchool,batchUpdateNotice,sendNotice} from "@/api/notice/schoolNotice";

  
  export default {
    name: "Config",
    data() {
       
      return {
        // 遮罩层
        loading: true,
        editPlanVisible:false,
        multiple:true,
        // 选中数组
        ids: [],
        // 总条数
        total: 0,
        // 参数表格数据
        configList: [],
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          noticeType:1
        },
        isAddMonthPlan:false,
        consultMajorList:[],
        formData:{
            personList:[],
            planName:null,
            planNumbers:null,
            planDesc:null,
            pid:null,
  
        },
        rules:{
            planName:[{ required: true, message: "请填写计划名称", trigger: "blur" }],
            planType:[{ required: true, message: "请选择计划类型", trigger: "blur" }],
            consultPlanNumbers:[{ required: true, message: "请填写咨询计划数量", trigger: "blur" }],
            enrollPlanNumbers:[{ required: true, message: "请填写报名计划数量", trigger: "blur" }],
            pid:[{ required: true, message: "请选择年度计划", trigger: "blur" }],
            planClassify:[{ required: true, message: "请选择计划分类", trigger: "blur" }],
            planCycle:[{ required: true, message: "请选择计划周期", trigger: "blur" }]
        },
        userList:[],
        parentList:[],
        isYear:false,
        termTimeList:[],
        rowList:[],
        modelStyle: {
                width:'375px',
                height:'667px',
                overflow: 'auto'
            },
        selectModelData:'375,667',
        open:false,
        viewData:{}
      };
    },
    created() {
      this.getList();
      this.getTermTimeList()
    },
    methods: {
      handleReset(){
        this.queryParams={
          pageNum: 1,
          pageSize: 10,
          noticeType:1
        }
        this.getList();
      },
      /** 查询参数列表 */
      getList() {
        this.loading = true;
        findNoticeSchoolPageList(this.queryParams).then(response => {
            this.configList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },

      handleEdit(row){
        if(row){
            this.$router.push({path:"/safeManage/safe/edit",query:{id:row.id}})
        }else{
            //弹出窗口
            this.$router.push("/safeManage/safe/edit")
        }
          
  
      },
      handleClose(){
          //关闭窗口
          this.editPlanVisible = false
      },

      submitPlan(){
          //提交计划    
          this.$refs["formData"].validate(valid => {
              if (valid) {
                  addOrupdatePlanInfo(this.formData).then(resp=>{
                      if(resp.code==200){
                          this.msgSuccess("提交成功");
                          this.handleClose()
                          this.handleQuery()
                      }
                  })
              }
          })
      },
      getTermTimeList() {
            //查询学期
            // this.loading = true;
            listTermtime({pageSize:100,pageNum:1,status:1}).then(response => {
                this.termTimeList = response.data.list;
            });
        },
        getTerm(termId){
            for(let i=0;i<this.termTimeList.length;i++){
                if(this.termTimeList[i].id==termId){
                    return this.termTimeList[i].tetiBeginYear+'~'+this.termTimeList[i].tetiEndYear
                }
            }
        },
      handleUpdate(row){
          
         
          
      },
      handleDelete(row){
          //删除
          const _this = this
           this.$confirm('是否确认删除吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            deleteNoticeSchool({id:row.id}).then(resp=>{
              if(resp.code==200){
                  _this.msgSuccess("删除成功");
                  _this.handleQuery()
              }
          })
          })
          
      },
      resetFormData(){
          this.formData={
            personList:[],
            planName:null,
            planNumbers:null,
            planDesc:null,
            pid:null,
          }
      },
      handleSelectionChange(selection){
        console.log(selection)
        this.rowList = selection
        this.multiple = !selection.length
      },
      operationStatus(flag){
        let list = []
        for(let i=0;i<this.rowList.length;i++){
            list.push({
                    id:this.rowList[i].id,
                    status:flag
                })
        }
        let str="开启"
        if(flag==0){
            str="关闭"
        }
        this.$confirm('是否确认'+str+'选中的内容?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(()=> {
            batchUpdateNotice(list).then(resp=>{
                this.msgSuccess(str+"成功");
                this.getList()
            })
          })
        
      },
    //   handleDelete(row) {
    //     const ids = row.id || this.ids;
    //     this.$confirm('是否确认删除吗?', "警告", {
    //                 confirmButtonText: "确定",
    //                 cancelButtonText: "取消",
    //                 type: "warning"
    //             }).then(function() {
    //                 return deleteNoticeSchool([row.id]);
    //             }).then(() => {
    //                 this.getList();
    //                 this.msgSuccess("删除成功");
    //             }).catch(function() {});
    //     },
      viewContent(row){
            this.open=true
            getNoticeSchool(row.id).then(resp=>{
              this.viewData = resp.data
              if(resp.data && resp.data.noticeContent){
                const context = resp.data.noticeContent.replace(/<img/gi,"<img width='100%'")
                this.viewData.noticeContent = context
              }
              
            })
        },
        selectModel(val){
            const items = val.split(',')
            this.modelStyle = {
                width:items[0]+'px',
                height:items[1]+'px',
                overflow: 'auto'
            }


        },
        handleSendNotice(row){
            let alertTxt = '确认发送通知吗？'
            if(row.isSend=='1'){
                alertTxt = '通知已经发送，是否重复发送？'
            }

            this.$confirm(alertTxt, "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=> {
                    if(row.releaseScopeNotice=='1'){
                        row.classIds = row.classId.split(',')
                    }
                    if(row.releaseScopeNotice=='2'){
                        row.grade = row.gradeId
                    }
                    sendNotice(row).then(resp=>{
                        this.msgSuccess("发送成功");
                        this.getList()
                    })
                })
        }
    }
  };
  </script>
  
<style scoped lang="scss">
  .modelDiv{
    border: 1px solid rgb(112, 111, 111);
    margin: 0 auto; 
    border-radius: 5px;
    
  } 
  /deep/ .el-dialog__body{
    padding: 5px 0px
  }
</style>